<script setup lang="ts">
import { reactive, onBeforeMount } from 'vue'
import { storeToRefs } from 'pinia'
import { getCaptcha } from '@/api/system/security'
import { useAppStore } from '@/store'

const appStore = useAppStore()
const { sysName, loginBanner, copyrightYear, copyrightName, copyrightLink, icp } = storeToRefs(appStore)

const state = reactive({
    captcha: '',
    form: {}
})

const onRefreshCaptcha = async () => {
    const { data } = await getCaptcha()
    state.captcha = data.img
}

onBeforeMount(() => {
    onRefreshCaptcha()
})
</script>

<template>
    <div class="login">
        <div class="login-box">
            <div class="login-box-image">
                <img :src="loginBanner" />
            </div>
            <div class="login-box-form">
                <a-form :model="state.form">
                    <a-space :size="5" direction="vertical" fill>
                        <a-typography-title :heading="3" class="login-box-form-title">
                            {{ sysName }}
                        </a-typography-title>
                        <a-form-item hide-label field="username">
                            <a-input size="large" placeholder="用户名">
                                <template #prefix>
                                    <icon-user />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item hide-label field="password">
                            <a-input-password size="large" placeholder="密码">
                                <template #prefix>
                                    <icon-lock />
                                </template>
                            </a-input-password>
                        </a-form-item>
                        <div class="login-box-form-captcha">
                            <a-form-item hide-label field="captcha" style="flex: 1">
                                <a-input size="large" placeholder="验证码">
                                    <template #prefix>
                                        <icon-code-square />
                                    </template>
                                </a-input>
                            </a-form-item>
                            <img :src="state.captcha" @click="onRefreshCaptcha" />
                        </div>
                        <a-form-item hide-label>
                            <a-button type="primary" size="large" long>登 录</a-button>
                        </a-form-item>
                        <a-checkbox value="1">
                            勾选即代表同意
                            <a-link href="/privacy" target="_blank" :hoverable="false">《个人隐私政策》</a-link>
                        </a-checkbox>
                    </a-space>
                </a-form>
            </div>
        </div>
    </div>
    <div class="copyright">
        &copy;{{ copyrightYear }},
        <a-link :href="copyrightLink" target="_blank" :hoverable="false">{{ copyrightName }}</a-link>
        版权所有.
        <a-link v-if="icp" href="https://beian.miit.gov.cn" target="_blank" :hoverable="false">{{ icp }}</a-link>
    </div>
</template>

<style scoped lang="less">
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('@/assets/background.svg');
    background-repeat: no-repeat;
    background-position: center 110px;
    background-size: 100%;

    &-box {
        width: 900px;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 20px;
        border-radius: var(--border-radius-large);
        display: flex;
        align-items: center;

        &-image {
            padding: 20px;

            img {
                width: 410px;
                height: auto;
            }
        }

        &-form {
            flex: 1;
            padding: 20px 40px 20px 20px;

            &-title {
                margin-top: 0;
                margin-bottom: 20px;
            }

            &-captcha {
                display: flex;

                img {
                    height: 34px;
                    width: auto;
                    margin-left: 20px;
                    cursor: pointer;
                }
            }
        }
    }
}
.copyright {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 32px;
    text-align: center;
}
</style>
